import { CloseOutlined } from '@ant-design/icons';
import { Button, Drawer, Space } from 'antd';
import { CSSProperties, ReactNode } from 'react';
import './index.less';

export interface CommonDrawerProps {
  visible: boolean;
  title: string;
  width?: number | string;
  placement?: 'top' | 'right' | 'bottom' | 'left';
  onClose: () => void;
  children: ReactNode;
  footer?: ReactNode;
  maskClosable?: boolean;
  destroyOnHidden?: boolean;
  bodyStyle?: CSSProperties;
  headerStyle?: CSSProperties;
  className?: string;
  showDefaultFooter?: boolean;
  confirmLoading?: boolean;
  onConfirm?: () => void;
  onCancel?: () => void;
  confirmText?: string;
  cancelText?: string;
  confirmButtonProps?: any;
  cancelButtonProps?: any;
}

const CommonDrawer: React.FC<CommonDrawerProps> = ({
  visible,
  title,
  width = 600,
  placement = 'right',
  onClose,
  children,
  footer,
  maskClosable = false,
  destroyOnHidden = true,
  bodyStyle,
  headerStyle,
  className,
  showDefaultFooter = true,
  confirmLoading = false,
  onConfirm,
  onCancel,
  confirmText = '确定',
  cancelText = '取消',
  confirmButtonProps,
  cancelButtonProps,
}) => {
  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    } else {
      onClose();
    }
  };

  const defaultFooter = showDefaultFooter && (
    <div className="common-drawer-footer">
      <Space>
        <Button icon={<CloseOutlined />} onClick={handleCancel} {...cancelButtonProps}>
          {cancelText}
        </Button>
        {onConfirm && (
          <Button type="primary" loading={confirmLoading} onClick={onConfirm} {...confirmButtonProps}>
            {confirmText}
          </Button>
        )}
      </Space>
    </div>
  );

  return (
    <Drawer
      title={title}
      open={visible}
      onClose={onClose}
      width={width}
      placement={placement}
      destroyOnHidden={destroyOnHidden}
      maskClosable={maskClosable}
      className={className}
      rootClassName="common-drawer-animated"
      styles={{
        header: headerStyle,
        body: bodyStyle,
      }}
      footer={footer !== undefined ? footer : defaultFooter}
    >
      {children}
    </Drawer>
  );
};

export default CommonDrawer;
